<template>
	<view class="shop">
		<nav-bar  color="#22" backgroundColor="#fff" navbarbg="#fff"  leftIcon="">
			<view class="t2" slot="title"> 
				<image :src="imgUrl+'10.png'" mode="widthFix"></image>
			</view>
		</nav-bar>
		<mescroll-uni ref="mescroll" @getData="getProductList" :top="navHeight" bottom="88" @scroll="scroll">
			<block slot="list" >
				<view class="d1">
					<view class="t4 u-flex u-flex-between"  @click="goTo('/pages/home/selectSelfLifting?store='+JSON.stringify(store))">
						<view class="l u-flex u-flex-y-center">
							<image :src="imgUrl+'2.png'"></image>
							<text class="text_over">{{store.fullAddress}}</text>
						</view>
						<w-icon type="more" color="#999" size="26rpx"></w-icon>
					</view>
					<view class="t3">
						<image :src="banner"></image>
					</view>
				</view>
				<view class="cate">
					<view class="t5">
						<image :src="imgUrl+'a1.png'" mode="widthFix"></image>
					</view>
					<view class="fix-top" :class="fixed?'fixed':''" :style="{'top':navHeight}">
						<scroll-view scroll-x="true" class="cate-wrap" >
							<view class="cate-item" :class="activeId==index?'active':''"
								v-for="(item,index) in cateArray" :key="index" @tap="changeItem(index)" :date-id="item.tagBaseId">
								<view>
									<image :src="item.sImgUrl" mode="widthFix"></image>
								</view>
								<view class="text">{{item.tagName}}</view>
							</view>
						</scroll-view>
					</view>
					<view v-if="fixed" class="fix-height"></view>
				</view>
				<block v-if="listData.length>0">
				<view class="good-cont">
					<view class="t23">
						<view v-for="(item,idx) in listData" :key="idx" @click="goTo('/pages/home/shopDetail?productid='+item.productId+'&store='+JSON.stringify(store))">
							<view>
								<image class="img1" :src="item.image"></image>
							</view>
							<view class="t24">
								<view class="text_over">
									{{item.title}}
								</view>
								<view>
									<image class="img2" :src="imgUrl+'9.png'" mode="widthFix"></image>
								</view>
								<view class="t25">
									¥{{item.costPrice}}<text>¥{{item.price}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				</block>
				<block v-if="listData.length==0&&loader">
					<u-empty marginTop="30" iconSize="70"  :text="emptyTips" mode="favor"></u-empty>
				</block>
			</block>
		</mescroll-uni>
	</view>
</template>

<script>
	import wIcon from '@/components/w-icon.vue'
	import navBar from '@/components/nav-bar.vue'
	export default {
		components: {
			wIcon,
			navBar
		},
		data() {
			return {
				imgUrl: this.imgUrl,
				cateArray: [],
				activeId: 0,
				fixed: false,
				fixedheight:"",
				banner:"",
				pageindex:1,
				tagid:2,
				listData:[],
				store:{
					fullAddress:""
				},
				emptyTips:"还没有商品",
				loader:false
			}
		},
		computed: {
			navHeight(){
				const res = uni.getSystemInfoSync();
				return (res.statusBarHeight + 44) + 'px'
			}
		},
		created() {
			this.getList();
			this.getIndexTagList()
			
			if(uni.getStorageSync("store")){
				this.store = uni.getStorageSync("store")
			}
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this).select(".d1");
			query.boundingClientRect(data => {
				if (data != null) {
					this.fixedheight = data.height;
					console.log(this.fixedheight)
				}
			}).exec();
		},
		methods: {
			getList(){
					this.$http.GetList({
						code:"KLySMr"
					}).then(res => {
						if(res.code==0){
						this.banner = res.content[0].imageUrl
						}
					})
			},
			getIndexTagList(){
				let p = new Promise((resolve,reject)=>{
						this.$http.GetIndexTagList({
						}).then(res => {
							if(res.code==0){
								this.cateArray = res.content;
								this.tagid = this.cateArray[0].tagBaseId
								resolve();
							}
						})
				})
				return p;
			},
			 getProductList(mescroll){
				this.$http.GetProductList({
					tagid:this.tagid,
					pagesize:mescroll.size,
					pageindex:mescroll.num,
					storeId:this.store.storeId
				}).then(res => {
					if(res.code==0){
						let newArr=[]
							newArr = res.content;
							this.loader = true;
							mescroll.endSuccess(newArr.length);
							if (mescroll.num == 1) this.listData = []; 
							this.listData = this.listData.concat(newArr); //追加新数据
						
					}
				})
			},
			changeItem(index) {
				this.activeId = index;
				this.tagid = this.cateArray[index].tagBaseId;
				this.$refs.mescroll.refresh();
			},
			scroll(e) {
				if (e.scrollTop > this.fixedheight) {
					this.fixed = true
				} else {
					this.fixed = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}
	$nav-height: 44px;

	.nav-bar-height {
		height:calc(var(--status-bar-height) + #{$nav-height});
	}

	.text_over {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.fixed {
		position: fixed;
		// top: calc(var(--status-bar-height) + #{$nav-height});
		// top: calc( #{$nav-height});
		left: 0;
		width: 100%;
		background: #fff;
	}

	.fix-height {
		height: 160upx;
	}

	.t2 {
		background: #FFFFFF;
		text-align: center;
		width: 100%;

		image {
			width: 100%;
			height: 60upx;
		}

	}

	.t3 {
		image {
			width: 100%;
			height: 448upx;
		}
	}

	.t4 {
		padding: 0 30upx;
		height: 72upx;
		line-height: 72upx;

		.l {
			font-size: 28upx;
			color: #222;

			image {
				width: 30upx;
				height: 28upx;
			}

			text {
				width: 420upx;
				margin-left: 10upx;
			}
		}
	}

	.cate {
		margin-top: -50upx;
		background: #fff;
		border-radius: 24upx 24upx 0 0;
		padding-bottom: 30upx;
		box-shadow: 0px 2upx 11upx 0px rgba(0, 0, 0, 0.1);
		position: relative;
		z-index: 100;

		.t5 {
			text-align: center;
			margin-top: 18upx;

			image {
				width: 128upx;
				height: 32upx;
			}
		}

		.cate-wrap {
			height: 160upx;
			white-space: nowrap;
			width: 100%;
			text-align: center;

			.cate-item {
				display: inline-block;
				width: 20%;

				image {
					width: 64upx;
					height: 64upx;
				}

				.text {
					width: 64upx;
					font-size: 28upx;
					color: #999;
					line-height: 32upx;
					margin-top: 16upx;
					white-space: pre-wrap;
					margin: 0 auto;
				}

				&.active {
					.text {
						color: #BFB59C;
					}
				}
			}
		}
	}

	.t23 {
		padding: 0 30rpx;
		margin-top: 30rpx;

		>view {
			width: 330upx;
			height: 504upx;
			background: #FFFFFF;
			box-shadow: 0px 2upx 11upx 0upx rgba(0, 0, 0, 0.1);
			border-radius: 16upx;
			display: inline-block;
			border-radius: 20upx;
			margin-right: 30upx;
			margin-bottom: 20upx;

			.img1 {
				width: 100%;
				height: 300upx;
				border-top-left-radius: 20upx;
				border-top-right-radius: 20upx;

			}

			.t24 {
				padding: 20upx;

				.img2 {
					width: 72upx;
					height: 40upx;
					margin: 20upx 0;
				}

				.t25 {
					font-size: 28upx;
					font-weight: 500;
					color: #333333;

					text {
						font-size: 24upx;
						font-weight: 400;
						display: inline-block;
						text-decoration: line-through;
						color: #999999;
						margin-left: 24upx;
					}
				}
			}

		}

		>view:nth-child(2n) {
			margin-right: 0;
		}
	}
</style>
